<template>
  <div id="footer">
    <router-link tag="div" :to="{ path: '/home' }">
      <p><svg-icon icon-class="home" /></p>
      <p>首页</p>
    </router-link>
    <router-link tag="div" :to="{ path: '/modul1' }">
      <p><svg-icon icon-class="videoStudy" /></p>
      <p>模块1</p></router-link>
    <router-link tag="div" :to="{ path: '/modul2' }">
      <p><svg-icon icon-class="train" /></p>
      <p>模块2</p></router-link>
    <router-link tag="div" :to="{ path: '/modul3' }">
      <p><svg-icon icon-class="my" /></p>
      <p>我的</p></router-link>
  </div>
</template>

<script>
export default {
  name: 'Footer',
  components: {},
  props: {},
  data() {
    return {}
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {}
}
</script>

<style scoped lang="scss">
#footer {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 99;
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 100px;
  font-size: 24px;
  color: $MinorC;
  background-color: #fff;
  border-top: 1px solid #e4e4e4;
      box-shadow: 0 0 0.933vw 0 rgba(0,0,0,.15);
  .router-link-active {
    color: $BaseC;
  }
  div {
    p {
      text-align: center;
      font-size: 24px;
      font-weight: 500;
      &:first-child {
        font-size: 30px;
        // margin-bottom: 10px;
      }
    }
  }
}
</style>
